<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-13">
        <my-awesome-list :items="items">
            <!-- 作用域插槽也可以是具名的 -->
            <template slot="item" scope="props">
              <li class="my-fancy-item">{{ props.text }}</li>
            </template>
        </my-awesome-list>
    </div>
    <script>
        Vue.component('my-awesome-list', {
            props: {
                items: Array
            },
            template: '\
                <ul>\
                    <slot name="item"\
                        v-for="item in items"\
                        :text="item.text">\
                    <!-- 这里写入备用内容 -->\
                    </slot>\
                </ul>\
            ',
        });
        // 创建根实例
        new Vue({
            el: '#app-13',
            data: {
                items: [{
                        id: 1,
                        text: 'Do the dishes',
                    },
                    {
                        id: 2,
                        text: 'Take out the trash',
                    },
                    {
                        id: 3,
                        text: 'Mow the lawn'
                    }
                ]
            }
        })
    </script>
</body>


</html>